<template>
  <div class="single-sign">
    <c-list :bread="bread">
      <template #contentTopRight>
        <div class="add-del">
          <a-button type="primary" @click="$refs['singleEdit'].visible = true">新增</a-button>
          <a-button @click="onDelete" :disabled="delParams.length ? false : true">删除</a-button>
        </div>
      </template>
      <template #content>
        <div class="l-header l-row">
          <div class="l-col l-col-0">
            <input type="checkbox" id="checkAll" class="l-checkbox" @click="checkAll()" :checked="isCheckedAll" />
            <label for="checkAll"></label>
          </div>
          <div class="l-col l-col-1">系统名称</div>
          <div class="l-col l-col-2">账号</div>
          <div class="l-col l-col-3">密码</div>
          <div class="l-col l-col-4"></div>
        </div>

        <div class="l-item l-row" v-for="(item, idx) in dataSource" :key="idx">
          <div class="l-col l-col-0">
            <input type="checkbox" :id="'checkbox-' + idx" class="l-checkbox" @click="checkboxChange(item.id)" :checked="checkedMap[item.id]" />
            <label :for="'checkbox-' + idx"></label>
          </div>
          <div class="l-col l-col-1">{{ item.systemNameCn }}</div>
          <div class="l-col l-col-2">{{ item.userName }}</div>
          <div class="l-col l-col-3 col-pwd">{{ item.passwordShow ? item.password : "******" }}</div>
          <div class="l-col l-col-4">
            <span class="iconfont iconxianshi" :class="{ iconbiyan: item.passwordShow }" @click="changePasswordShow(idx)"></span>
            <span class="iconfont iconbianji" @click="edit(item)"></span>
          </div>
        </div>
      </template>

      <template #pagination>
        <a-pagination v-model="pageNum" @change="onChange" :showTotal="(total) => `共${total}条`" show-size-changer :total="total" @showSizeChange="onShowSizeChange" :pageSize.sync="pageSize" />
      </template>
    </c-list>
    <single-edit ref="singleEdit" @success="onChange"></single-edit>
  </div>
</template>

<script lang="ts">
import Base from "@/controllers/base.ts";
import { Component } from "vue-property-decorator";
import { Button, Pagination } from "ant-design-vue";
import CList from "@/components/CList/index.vue";
import SingleEdit from "./edit.vue";

@Component({
  name: "SingleSign",
  components: {
    CList,
    SingleEdit,
    AButton: Button,
    APagination: Pagination
  }
})
export default class SingleSign extends Base {
  private pageNum = 1;
  private total = 0;
  private pageSize = 20;
  private dataSource: any[] = [];
  private checkedMap: any = {};
  private isCheckedAll = false;

  private created() {
    this._created();
    this.getList();
  }

  private edit(obj: any) {
    (this.$refs as any).singleEdit.changeVisible(obj);
  }

  private async getList() {
    this.dataSource = [];
    const res = await this.$api.SsoInfoList({
      pageNum: this.pageNum,
      pageSize: this.pageSize
    });
    if (res && res.code === 200) {
      this.total = res.total;
      this.dataSource = Array.from(res.rows, (item) => Object.assign({}, item, { passwordShow: false }));
    }
    return res;
  }

  /**
   * 全选
   * @param {boolean} 来源是否翻页
   */
  private checkAll(page: boolean) {
    if (page === void 0) {
      this.isCheckedAll = !this.isCheckedAll;
    }

    if (this.isCheckedAll) {
      this.dataSource.map((item: any) => {
        if (this.checkedMap[item.id] === void 0 || page === void 0) {
          this.$set(this.checkedMap, item.id, true);
        }
      });
    } else {
      this.checkedMap = {};
    }
  }

  /**
   * 行内checkbox点击事件
   */
  private checkboxChange(id: number) {
    if (this.checkedMap[id]) {
      this.$set(this.checkedMap, id, false);
    } else {
      this.$set(this.checkedMap, id, true);
    }
  }

  private changePasswordShow(idx: number) {
    this.$set(this.dataSource[idx], "passwordShow", !this.dataSource[idx].passwordShow);
  }

  private async onChange() {
    const res = await this.getList();
    if (res && res.code === 200 && this.isCheckedAll) {
      this.checkAll(true);
    }
  }

  private async onShowSizeChange() {
    this.pageNum = 1;

    // 改变分页尺寸后，清空选中项目
    this.checkedMap = {};
    const res = await this.getList();
    if (res && res.code === 200 && this.isCheckedAll) {
      this.checkAll(true);
    }
  }

  private onDelete() {
    if (this.delParams.length) {
      this._confirm({
        content: "确定删除吗？",
        onOk: async () => {
          const res = await this.$api.SsoInfoDel(this.delParams);
          if (res && res.code === 200) {
            this.$message.success("删除成功");
            this.onChange();
          }
        }
      });
    }
  }

  private get delParams() {
    const _return: number[] = [];
    Object.keys(this.checkedMap).map((key: string) => {
      if (this.checkedMap[key]) {
        _return.push(Number(key));
      }
    });
    return _return;
  }
}
</script>

<style lang="less" scoped>
@import "~@/assets/style/mixin.less";
.single-sign {
  // checkbox 样式 START
  input[type="checkbox"] {
    display: none;
  }
  .l-checkbox {
    & + label::before {
      font-size: 18px;
      content: "\e727";
      font-family: "iconfont";
      color: #cccccc;
    }

    &:checked {
      & + label::before {
        color: #50a2ec;
        content: "\e601";
      }
    }
  }

  .l-header {
    .l-checkbox + label::before {
      color: #9acfff;
    }
  }

  .l-item {
    &:hover {
      .l-checkbox + label::before {
        color: #50a2ec;
      }
    }
  }
  // checkbox 样式 END

  .l-header {
    background: linear-gradient(0deg, #4b9cea 0%, #66b0f2 100%);
    border-radius: 2px;
    color: white;
  }
  .iconbiyan {
    top: 50%;
  }

  .l-item {
    &:hover {
      color: #50a2ec;
      .iconfont {
        display: block;
      }
    }
  }
  .l-row {
    padding: 8px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ececec;
  }

  .l-col {
    position: relative;
  }

  .l-col-0 {
    padding-left: 12px;
    padding-right: 20px;
  }

  .l-col-1 {
    flex: 1;
  }

  .l-col-2,
  .l-col-3 {
    text-align: center;
    flex-shrink: 0;
    width: 150px;
    position: relative;
    &::before {
      content: "";
      top: 50%;
      transform: translateY(-50%);
      left: 0;
      position: absolute;
      height: 14px;
      width: 1px;
      background-color: rgba(255, 255, 255, 0.39);
    }
  }
  .l-col-4 {
    width: 60px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    span {
      display: none;
      cursor: pointer;
      padding: 0 6px;
    }
  }
  .add-del {
    .ant-btn-primary {
      margin-right: 16px;
    }
  }
}
</style>
